<template>
  <div class="app-container" style="padding: 5px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="上涨" name="first">
            <el-card>
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="周数" prop="wek">
                        <el-select v-model="queryParams.wek" filterable  style="width: 300px;" @change="handleQueryRise">
                            <el-option
                            v-for="item in wekList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据来源" prop="source">
                        <el-select v-model="queryParams.source" filterable @change="handleQueryRise">
                            <el-option
                            v-for="item in sourceList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card style="margin-top:5px;">
                <el-table :data="risepriceList" border stripe :span-method="rowSpanMethod1">
                    <el-table-column label="日期区间" align="center" prop="wek" width="240"></el-table-column>
                    <el-table-column label="数据来源" align="center" prop="source"></el-table-column>
                    <el-table-column label="分类" align="center" prop="cls"></el-table-column>
                    <el-table-column label="品种" align="left" prop="pz">
                        <template slot-scope="scope">
                            <i class="el-icon-top" style="color:red;font-size: 20px;font-weight: bold;"></i> <span style="margin-left: 10px;">{{ scope.row.pz }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最低价" align="center" prop="lp"></el-table-column>
                    <el-table-column label="最低价(环比)" align="center" prop="hb_lp"></el-table-column>
                    <el-table-column label="最高价" align="center" prop="hp"></el-table-column>
                    <el-table-column label="最高价(环比)" align="center" prop="hb_hp"></el-table-column>
                    <el-table-column label="" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="持平" name="second">
            <el-card>
                <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="周数" prop="wek">
                        <el-select v-model="queryParams1.wek" filterable  style="width: 300px;" @change="handleUnchange">
                            <el-option
                            v-for="item in wekList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据来源" prop="source">
                        <el-select v-model="queryParams1.source" filterable @change="handleUnchange">
                            <el-option
                            v-for="item in sourceList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card style="margin-top:5px;">
                <el-table :data="unchangeList" border stripe :span-method="rowSpanMethod2">
                    <el-table-column label="日期区间" align="center" prop="wek" width="240"></el-table-column>
                    <el-table-column label="数据来源" align="center" prop="source"></el-table-column>
                    <el-table-column label="分类" align="center" prop="cls"></el-table-column>
                    <el-table-column label="品种" align="left" prop="pz">
                        <template slot-scope="scope">
                            <i class="el-icon-minus" style="color:gray;font-size: 20px;font-weight: bold;"></i> <span style="margin-left: 10px;">{{ scope.row.pz }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最低价" align="center" prop="lp"></el-table-column>
                    <el-table-column label="最低价(环比)" align="center" prop="hb_lp"></el-table-column>
                    <el-table-column label="最高价" align="center" prop="hp"></el-table-column>
                    <el-table-column label="最高价(环比)" align="center" prop="hb_hp"></el-table-column>
                    <el-table-column label="" align="center">
                        <template slot-scope="scope">
                            <el-button type="info" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="下跌" name="third">
            <el-card>
                <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="周数" prop="wek">
                        <el-select v-model="queryParams2.wek" filterable  style="width: 300px;" @change="handleDown">
                            <el-option
                            v-for="item in wekList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据来源" prop="source">
                        <el-select v-model="queryParams2.source" filterable @change="handleDown">
                            <el-option
                            v-for="item in sourceList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card style="margin-top:5px;">
                <el-table :data="downList" border stripe :span-method="rowSpanMethod3">
                    <el-table-column label="日期区间" align="center" prop="wek" width="240"></el-table-column>
                    <el-table-column label="数据来源" align="center" prop="source"></el-table-column>
                    <el-table-column label="分类" align="center" prop="cls"></el-table-column>
                    <el-table-column label="品种" align="left" prop="pz">
                        <template slot-scope="scope">
                            <i class="el-icon-bottom" style="color:green;font-size: 20px;font-weight: bold;"></i> <span style="margin-left: 10px;">{{ scope.row.pz }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最低价" align="center" prop="lp"></el-table-column>
                    <el-table-column label="最低价(环比)" align="center" prop="hb_lp"></el-table-column>
                    <el-table-column label="最高价" align="center" prop="hp"></el-table-column>
                    <el-table-column label="最高价(环比)" align="center" prop="hb_hp"></el-table-column>
                    <el-table-column label="" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="花价走势" name="fourth">
            <el-form :model="queryParams3" ref="queryForm3" size="small" :inline="true" label-width="110px" label-position="top">
                <el-form-item label="开始时间" prop="startDate">
                    <el-date-picker v-model="queryParams3.startDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleQuery3"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endDate">
                    <el-date-picker v-model="queryParams3.endDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleQuery3"></el-date-picker>
                </el-form-item>
                <el-form-item label="品种名称" prop="cls">
                    <el-select v-model="queryParams3.brand" filterable @change="handleQuery3">
                        <el-option
                        v-for="item in brandsList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div ref="chart3" style="width: 100%; height: 700px;margin-left: -100px;"></div>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listRisePriceSummary,listUnchangeSummary,listDownSummary,listBrandFlowerPrice } from "@/api/system/weekly/weeklydashboard";
import { listHjbbDicts,listFlowerPriceDicts } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';

export default {
    name: "Hjbb",
    data() {
        return {
          activeName: 'first',
          wekList: [],
          sourceList: [],
          risepriceList: [],
          unchangeList: [],
          downList: [],
          brandsList: [],
          queryParams: {
            wek: null,
            source: null
          },
          queryParams1: {
            wek: null,
            source: null
          },
          queryParams2: {
            wek: null,
            source: null
          },
          queryParams3: {
            startDate: null,
            endDate: null,
            brand: null,
          },
        }
    },
    created() {
        this.getHjbbDicts();
    },
    mounted(){
        
    },
    methods: {
        getHjbbDicts(){
            listHjbbDicts().then(res =>{
                this.queryParams.wek = res.data.week;
                this.queryParams.source = "all";
                this.wekList = res.data.weeks;
                this.sourceList = res.data.sources;
                this.getRisePriceSummary();
            })
        },
        getDownSummary(){
            listDownSummary(this.queryParams2).then(res =>{
                this.downList = res.data;
            })
        },
        getRisePriceSummary(){
            listRisePriceSummary(this.queryParams).then(res =>{
                this.risepriceList = res.data;
            })
        },
        getUnchangeSummary(){
            listUnchangeSummary(this.queryParams1).then(res =>{
                this.unchangeList = res.data;
            })
        },
        getBrandFlowerPrice(){
            listBrandFlowerPrice(this.queryParams3).then(res =>{
                let labels = [];
                for(let i=0;i<res.data.list.length;i++){
                    labels.push(res.data.list[i].ywek);
                }
                const chart3 = echarts.init(this.$refs.chart3);
                const option3 = {
                    title: {
                        text: this.queryParams3.brand+"-花价走势",
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    grid: {
                        height: '85%', // 设置内部图形的高度为容器高度的 70%
                        width:'90%'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.list.map(item => ({
                                value: item.avgprice,
                                name: item.ywek,
                                extraInfo:"品种: "+item.brand+"<br />周数: "+item.wek+"<br/> 最高价："+item.highprice+"<br />最低价："+item.lowprice+"<br />均价："+item.avgprice,
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                            lineStyle: {
                                color: res.data.color // 红色线条
                            }
                        }
                    ]
                };
                chart3.setOption(option3);
            })
        },
        handleClick(tab, event) {
            if(tab.index==1){
                this.queryParams1.wek = this.wekList[0].value;
                this.queryParams1.source = "all";
                this.getUnchangeSummary();
            }else if(tab.index==2){
                this.queryParams2.wek = this.wekList[0].value;
                this.queryParams2.source = "all";
                this.getDownSummary();
            }else if(tab.index==3){
                listFlowerPriceDicts().then(res=>{
                    this.queryParams3.startDate = res.data.startDate;
                    this.queryParams3.endDate = res.data.endDate;
                    this.queryParams3.brand = "爱情花";
                    this.brandsList = res.data.brands;
                    this.getBrandFlowerPrice();
                })
            }
        },
        handleDown(){
            this.getDownSummary();
        },
        handleUnchange(){
            this.getUnchangeSummary();
        },
        handleQueryRise(){
            this.getRisePriceSummary();
        },
        handleQuery3(){
            this.getBrandFlowerPrice();
        },
        rowSpanMethod3({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.downList[rowIndex - 1].wek !== row.wek) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.downList.length && this.downList[rowIndex + rowspan].wek === row.wek) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 1) {
                if (rowIndex === 0 || this.downList[rowIndex - 1].source !== row.source) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.downList.length && this.downList[rowIndex + rowspan].source === row.source) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 2) {
                if (rowIndex === 0 || this.downList[rowIndex - 1].cls !== row.cls) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.downList.length && this.downList[rowIndex + rowspan].cls === row.cls) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
        rowSpanMethod2({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.unchangeList[rowIndex - 1].wek !== row.wek) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.unchangeList.length && this.unchangeList[rowIndex + rowspan].wek === row.wek) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 1) {
                if (rowIndex === 0 || this.unchangeList[rowIndex - 1].source !== row.source) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.unchangeList.length && this.unchangeList[rowIndex + rowspan].source === row.source) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 2) {
                if (rowIndex === 0 || this.unchangeList[rowIndex - 1].cls !== row.cls) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.unchangeList.length && this.unchangeList[rowIndex + rowspan].cls === row.cls) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
        rowSpanMethod1({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.risepriceList[rowIndex - 1].wek !== row.wek) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.risepriceList.length && this.risepriceList[rowIndex + rowspan].wek === row.wek) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 1) {
                if (rowIndex === 0 || this.risepriceList[rowIndex - 1].source !== row.source) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.risepriceList.length && this.risepriceList[rowIndex + rowspan].source === row.source) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 2) {
                if (rowIndex === 0 || this.risepriceList[rowIndex - 1].cls !== row.cls) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.risepriceList.length && this.risepriceList[rowIndex + rowspan].cls === row.cls) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
    }
}
</script>